<template>
  <view class="orderDetails_">
   <!-- <view class="orderDetails_top">
    	<view class="orderDetails_top_left">
    		<image :src="httpUrlFn(goodsOrderItem.goodsImage)" ></image>
    	</view>
		<view class="orderDetails_top_right">
			<view class="orderDetails_top_title">
				{{goodsOrderItem.goodsName?goodsOrderItem.goodsName:""}}
			</view>
			<view class="orderDetails_top_sky">
				<text>{{goodsOrderItem.goodsSpec?goodsOrderItem.goodsSpec:''}}</text>
			</view>
		</view>
    </view>
	
	<view class="order-title">
		<view class="order-title-type">
			请选择服务类型
		</view>
		<picker @change="bindPickerChange" :value="index" :range="array">
		<view class="order-type-k">
			<view class="order-type-img">
				<image src="/static/images/icon-t.png"></image>
			</view>
			<view class="order-type-content">
				<view class="order-type-content-t">
					{{array[refundTypeselect]}}
				</view>
				<view class="order-type-content-c">
					没有收到货，或与卖家协商同意不用退货退款
				</view>
			</view>
			<view class="order-type-select">
				<image src="/static/images/icon-jt.png" ></image>
			</view>
		</view>
		</picker>
	</view> -->
	<view class="refund-ts">
		提前24小时取消订单，可全额退款。
	</view>
	
	
	<view class="refund">
		<u--form
						labelPosition="left"
						:model="model1"
						:rules="rules"
						ref="uForm"
						
				>
				
				<u-form-item
						label="退款原因"
						prop="refundReason"
						borderBottom
						labelWidth="120"
						@click="showSex = true; hideKeyboard()"
						ref="item1"
				>
				
					<u--input
							v-model="model1.refundReason"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择退款原因"
							border="none"
							inputAlign="right"
					></u--input>
					<u-icon
							slot="right"
							name="arrow-right"
					></u-icon>
				</u-form-item>
					<u-form-item
							label="联系人"
							prop="contactName"
							borderBottom
							ref="item1"
							labelWidth="100"
							
					>
						<u--input
								v-model="model1.contactName"
								border="none"
								inputAlign="right"
						></u--input>
					</u-form-item>
					<u-form-item
							label="联系方式"
							prop="contactPhone"
							borderBottom
							ref="item1"
							labelWidth="120"
					>
						<u--input
								v-model="model1.contactPhone"
								border="none"
								inputAlign="right"
						></u--input>
					</u-form-item>
					
				</u--form>
				
				
					
					
				<!-- <view class="refund-num">
					<view class="refund-num-left">
						<view class="refund-num-title">
							退款金额
						</view>
						<view class="refund-num-content">
							可退￥{{goodsOrderItem.goodsAllPrice}}，含发货邮费￥0
						</view>
					</view>
					<view class="refund-num-right">
						￥{{goodsOrderItem.goodsAllPrice}}
					</view>
				</view> -->
	</view>
	<view class="beizu">
		<view class="beizu-sm">
			<view class="beizu-sm-item">
				温馨提示：
			</view>
			<view class="beizu-sm-item">
				1.订单一旦退款，无法恢复
			</view>
			<view class="beizu-sm-item">
				2.提前24小时申请退款可全额退款
			</view>
			<view class="beizu-sm-item">
				3.距服务开始时间24小时内申请退款将收取10%手续费
			</view>
		</view>
		
	</view>
	
	<view class="order-foode">
		<view class="order-bt" @click="ordertjfun">
			申请退款
		</view>
		
	</view>
	<u-action-sheet
					:show="showSex"
					:actions="actions"
					title="请选择退款原因"
					@close="showSex = false"
					@select="sexSelect"
			>
			</u-action-sheet>
			
			
		
			
  </view>
</template>

<script>
	
	// getOrderItemSaleData,
	
// import UFormItem from "@/uview-ui/components/u-form-item/u-form-item";
import {
  getPackageRefundReason,
  savePackageRefundApply,
 
} from "@/api/orderApi";
import { BASE_URL_IMAHE } from "../../../../utils/https";
export default {
  name: "index.vue",
  // components: { UFormItem },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    // this.$refs.uForm.setRules(this.rules);
	//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
	    	this.$refs.uForm.setRules(this.rules)
  },
  onLoad(options) {
	  console.log(options,"options")
	  var sjs=this.randomWord()
	  var datatime = Date.parse(new Date());
	  this.token=''+sjs+''+datatime
	  this.userId=uni.getStorageSync("userId")?uni.getStorageSync("userId"):''
	  this.goodsOrderItemId= JSON.parse(decodeURIComponent(options.goodsOrderItemId)).id;
	  console.log(this.goodsOrderItemId)
	  // return
   this.getgetOrderItemSaleDatafun()
  },
  data() {
    return {
		
		showrefundType:false,
		array: ['仅退货', '退货退款'],
		refundTypelistvalue:["1","2"],
		
		showSex: false,
		logisticsCode:"",
		showlogisticsName:false,
		actionstwo:[],
		model1: {
			refundReason:'',
			contactName:"",
			contactPhone:"",
						
		},
					actions: [{
						name: '男',
						},
						{
							name: '女',
						},
						{
							name: '保密',
						},
					],
					rules: {
						'userInfo.name': {
							type: 'string',
							required: true,
							message: '请填写姓名',
							trigger: ['blur', 'change']
						},
						'userInfo.sex': {
							type: 'string',
							max: 1,
							required: true,
							message: '请选择男或女',
							trigger: ['blur', 'change']
						},
					},
					radio: '',
					value1:'',
					switchVal: false,
					refundReasonList:[],
					goodsOrderItem:{},
      
    };
  },
  methods: {
	 
	  
	 async ordertjfun(){
		 
			  if(!this.model1.refundReason){
			  			  this.$u.toast('请选择退款原因')
						  return
			  }
		  			
					  if(!this.model1.contactName){
					  			  this.$u.toast('请输入联系人')
					  		  						  return
					  }
					  if(!this.model1.contactPhone){
						 
					  		this.$u.toast('请输入联系方式')
					  	 return
					  }
					  var parphone = /^1[34578]\d{9}$/;
					  // console.log(this.model1.contactPhone)
					  if(!parphone.test(this.model1.contactPhone)){
						  this.$u.toast('联系方式格式错误')
						  return
					  }
		  			  
		
		  this.model1.token=this.token
		  this.model1.packageOrderId=this.goodsOrderItemId
		  // this.model1.userId=uni.getStorageSync("userId")
		  
		 
		  
		  var res=await savePackageRefundApply(JSON.stringify(this.model1) ) 
		  if(res.result==0){
			  
			  uni.showToast({
			    title: `已申请成功`,
			    icon: "success",
			    duration: 2000,
			  });
			  setTimeout(()=>{
			  	 this.backFn()
			  },1000)
		  }else{
			 this.$u.toast('申请失败，请重试')
			  var sjs=this.randomWord()
			  var datatime = Date.parse(new Date());
			  this.token=''+sjs+''+datatime
		  }
		  
	  },
	 bindPickerChange: function(e) {
		 
	             console.log('picker发送选择改变，携带值为', e.detail.value)
	             this.refundTypeselect = e.detail.value
				 this.refundReason=""
				 this.refundReasonvalue=""
				 this.logisticsName=""
				 this.logisticsnamevalue=""
	             this.logisticsCode=""
	         },
	  
	 async getgetOrderItemSaleDatafun(){
		var res=await getPackageRefundReason() 
		console.log(res)
		if(res.result==0){
			// this.refundTypenum= this.operation(res.goodsOrderItem.,res.goodsOrderItem.goodsNumber)
			res.refundReason.forEach((item,index)=>{
				item.name=item.dictValue
			})
			this.actions=res.refundReason
			
		}
		
	  },
	  
	  sexSelect(e) {
		  console.log(e)
	  			this.model1.refundReason = e.name
	  			this.$refs.uForm.validateField('refundReason')
	  		},
			
			
		//返回
		navBackFn() {
		  const pages = getCurrentPages();
		  const prevPage = pages[pages.length - 2]; //上一个页面
		  const object = {
		    swiperCurrent: 0,
		    current: 0,
		  };
		  prevPage.$vm.otherFun(object); //重点$vm
		  uni.navigateBack({
		    delta: 1,
		  });
		},
	randomWord() {
	    var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
	     var nums = "";
	      for (var i = 0; i < 20; i++) {
	      var id = parseInt(Math.random() * 61);
	      nums += chars[id]
	      }
	      return nums; 
	      },
	httpUrlFn(item) {
		     return BASE_URL_IMAHE + item;
		  },
	isInteger(obj){
		    return Math.floor(obj) === obj;
		  },
	toInteger(floatNum){
	  var ret = {times:1,num:0};
	  //是整数
	  if(this.isInteger(floatNum)){
	    ret.num = floatNum;
	    return ret;
	  }
	  var strfi = floatNum + '';
	  //查找小数点的下标
	  var dotPos = strfi.indexOf('.');
	  console.log('dotPos===='+dotPos);
	  //获取小数的位数
	  var len = strfi.substr(dotPos+1).length;
	  console.log('len===='+len);
	  //Math.pow(10,len)指定10的len次幂。
	  var time = Math.pow(10,len);
	  //将浮点数转化为整数
	  var intNum = parseInt(floatNum*time + 0.5,10);
	  console.log('intNum===='+intNum);
	  ret.times = time;
	  ret.num = intNum;
	  return ret;
	},
	operation(a,b,op){
		    var o1 = this.toInteger(a);
		    var o2 = this.toInteger(b);
		    var n1 = o1.num;
		    var n2 = o2.num;
		    var t1 = o1.times;
		    var t2 = o2.times;
		    var max = t1 > t2 ? t1 : t2;
		    var result = null;
		    switch(op){
		      case 'add':
		        if(t1 === t2){
		          result = n1 + n2;
		        }else if(t1 > t2){
		          result = n1 + n2 * (t1/t2);
		        }else{
		          result = n1 * (t2/t1) + n2;
		        }
		        return result / max;
		        break;
		      case 'subtract':
		        if(t1 === t2){
		          result = n1 - n2;
		        }else if(t1 > t2){
		          result = n1 - n2 * (t1/t2);
		        }else{
		          result = n1 * (t2/t1) - n2;
		        }
		        return result / max;
		        break;
		      case 'multiply':
		        result = (n1 * n2)/(t1 * t2);
		        return result;
		        break;
		      case 'divide':
		        result = (n1 / n2)/(t2 / t1);
		        return result;
		        break;
		    }
		  },
  },
};
</script>

<style scoped lang="scss">
	.orderDetails_{
		padding: 25rpx 32rpx 130rpx;
		
		.orderDetails_top{
			width: 100%;
			height: 192rpx;
			border-radius: 15rpx;
			padding: 22rpx 22rpx;
			background-color: white;
			border-radius: 25rpx;
			display: flex;
			justify-content: flex-start;
			.orderDetails_top_left{
				width: 150rpx;
				height: 150rpx;
				image{
					width: 138rpx;
					height: 138rpx;
				}
			}
			.orderDetails_top_right{
				width: 100%;
				margin-left: 20rpx;
				.orderDetails_top_title{
					font-size: 26rpx;
					padding-top: 10rpx;
					line-height: 40rpx;
					font-weight: bold;
				}
				.orderDetails_top_sky{
					margin-top: 10rpx;
					text{
						padding: 5rpx 20rpx;
						background-color: #eeeeee;
						border-radius: 50rpx;
						color: #7b7b7b;
					}
				}
				
			}
		}
		.refund-ts{
			font-size: 26rpx;
			color: #F9603D;
		}
		.refund{
			margin-top: 32rpx;
			padding: 22rpx 22rpx;
			background-color: white;
			border-radius: 25rpx;
			.refund-num{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 27rpx;
				.refund-num-title{
					font-size: 27rpx;	
				}
				.refund-num-content{
					font-size: 20rpx;	
					color: #999393;
				}
				.refund-num-right{
					font-size: 25rpx;
				}
			}
		}
		.beizu{
			margin-top: 32rpx;
			padding: 22rpx 22rpx;
			background-color: white;
			border-radius: 25rpx;
			.beizu-sm{
				border: 2rpx solid #999393;
				font-size: 27rpx;	
				margin-bottom: 12rpx;
				padding: 50rpx 34rpx;
				border-radius: 25rpx;
					
				.beizu-sm-item{
					font-weight: normal;
					font-size: 22rpx;
					color: #AFAFAF;
					line-height: 31rpx;
				}
				.beizu-sm-item:first-child{
					line-height: 51rpx;
				}
			}
		}
		.order-foode{
			position: absolute;
			padding-bottom: 50rpx;
			bottom: 0rpx;
			width: 100%;
			left: 0;
			.order-bt{
				width: 686rpx;
				border-radius: 50rpx;
				background-color: #fd6244;
				text-align: center;
				// width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				margin: 0 auto;
			}
		}
	}
	.order-title{
		line-height: 50rpx;
		font-size: 22rpx;
		
		.order-type-k{
			width: 100%;
			display: flex;
			align-items: center;
			padding: 22rpx 22rpx;
			background-color: white;
			border-radius: 25rpx;
			.order-type-img{
				width: 66rpx;
				height: 59rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.order-type-content{
				// display: flex;
				// flex-direction: column;
				width: 100%;
				margin-left: 20rpx;
				// align-items: center;
				.order-type-content-t{
					// margin-top: 50rpx;
					font-size: 27rpx;
				}
				.order-type-content-c{
					font-size: 26rpx;
					color: #d4d1d1;
					// margin-top: 50rpx;
				}
			}
			
			.order-type-select{
				width: 12rpx;
				height: 19rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			
		}
	}

</style>
